<template>
  <div>
    <h1>人员列表</h1>
    <h3 style="color:red">Count组件的和为: {{sum}}</h3>
    <h3>列表中第一个人名字是: {{ firstPersonName }}</h3>
    <input type="text" v-model="name" placeholder="请输入名字..." />
    <button @click="addWang">添加一个姓王的人</button>
    <button @click="add">添加</button>
    <button @click="addPersonServer">添加一个人，名字随机</button>
    <ul>
      <li v-for="p of personList" :key="p.id">{{ p.name }}</li>
    </ul>
  </div>
</template>

<script>
import { nanoid } from 'nanoid';

export default {
  name: "myPerson",
  data() {
    return {
      name:''
    }
  },
  computed: {
    personList() {
      return this.$store.state.personAbout.personList;
    },
    sum(){
      return this.$store.state.countAbout.sum
    },
    firstPersonName(){
      /**
       * (2) 手动从getters中获取数据比价特殊：它的属性不是一层层的用.访问
       *     而是用 / 拼接的地址作为一个整体属性，又/不支持用.就用[]了
       * */ 
      return this.$store.getters['personAbout/firstPersonName']
    }
  },
  methods: {
    add(){
       const p = {id:nanoid(),name:this.name}
       // (1) 要直接手动commit的话，需要在 第一个参数里用地址的形式 指定模块
       this.$store.commit('personAbout/AddPerson',p)
       this.name = ''
    },
    addWang(){
      const p = {id:nanoid(),name:this.name}
      // (3) 手动dispatch和commit一样
      this.$store.dispatch('personAbout/addPersonWang',p)
      this.name = ''
    },
    addPersonServer(){
      this.$store.dispatch('personAbout/addPersonServer')
    }
  },
};
</script>

<style></style>
